<template >
  <!-- 页头 -->
  <div style="margin-left: 20px; margin-top: 20px" id="employee">
    <template>
      <el-button type="primary" @click="addUser">添加</el-button>
    </template>

    <template>
      <!-- 表格 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="realname" label="姓名"> </el-table-column>
        <el-table-column prop="telephone" label="手机号"></el-table-column>
        <el-table-column prop="idCard" label="身份证号"></el-table-column>
        <el-table-column prop="bankCard" label="银行卡号"></el-table-column>
        <el-table-column prop="getDate" label="注册时间"></el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="delUser(scope.row)" type="text" size="small"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="updateUser(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="userDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="changePage"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </template>
    <!-- 模态框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogAddgsVisible"
      @close="closeDialogAddgsVisible"
    >
      <el-form :model="addCustomer" ref="addForm" :rules="rules">
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input
            v-model="addCustomer.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="realname"
        >
          <el-input
            v-model="addCustomer.realname"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="手机号"
          :label-width="formLabelWidth"
          prop="telephone"
        >
          <el-input
            v-model="addCustomer.telephone"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="身份证号"
          :label-width="formLabelWidth"
          prop="idCard"
        >
          <el-input v-model="addCustomer.idCard" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="银行卡号"
          :label-width="formLabelWidth"
          prop="bankCard"
        >
          <el-input
            v-model="addCustomer.bankCard"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="addCustomer.password"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddgsVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddForm('addForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
import qs from "querystring";
export default {
  created() {
    this.$axios.defaults.headers.post["Content-Type"] =
      "application/x-www-form-urlencoded";
  },
  data() {
    return {
      tableData: [],
      page: 0,
      pageSize: 6,
      realname: "",
      total: 1,
      telephone: "",
      status: "",
      title: "添加员工",
      dialogAddgsVisible: false,
      addCustomer: {
        username: "",
        realname: "",
        telephone: "",
        password: "",
        id: "",
        idCard: "",
        bankCard: "",
        status: "",
        registerTime: "",
      },
      formLabelWidth: "120px",
      rules: {
        username: [{ required: true, message: "请输入", trigger: "blur" }],
        realname: [{ required: true, message: "请输入", trigger: "blur" }],
        password: [{ required: true, message: "请输入", trigger: "blur" }],
        telephone: [{ required: true, message: "请输入", trigger: "blur" }],
        idCard: [{ required: true, message: "请输入", trigger: "blur" }],
        bankCard: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  mounted() {
    //页面载入时就发送axios请求
    var obj = {
      page: this.page,
      pageSize: this.pageSize,
    };
    this.$axios.post("/waiter/query", qs.stringify(obj)).then((res) => {
      console.log(res);
      //获取用户数量分页
      var total = res.data.data.total;

      this.total = Math.ceil(total / this.pageSize) * 10;

      this.tableData = res.data.data.list;
      console.log(this.tableData);
      //   console.log(this.total);
      this.orderTime();
    });
  },
  methods: {
    //页面改变时重新查询
    changePage(currentPage) {
      console.log(currentPage);
      this.page = currentPage - 1;
      this.getUser();
    },
    //封装获取用户函数
    getUser() {
      var obj = {
        page: this.page,
        pageSize: this.pageSize,
      };
      if (this.status != "") {
        obj.status = this.status;
      }
      console.log(obj);
      this.$axios.post("/waiter/query", qs.stringify(obj)).then((res) => {
        console.log(res);
        //获取用户数量分页
        var total = res.data.data.total;
        this.total = Math.ceil(total / this.pageSize) * 10;
        this.tableData = res.data.data.list;
        console.log(this.tableData);
        //   console.log(this.total);
        this.orderTime();
      });
    },
    delUser(data) {
      console.log("删除员工");
      var self = this;
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var id = data.id;
          self.$axios
            .get("/waiter/deleteById", {
              params: {
                id,
              },
            })
            .then((res) => {
              if (res.data.status == 200) {
                self.getUser();
                self.$message({
                  message: "更新成功",
                  type: "success",
                });
              } else {
                console.log("no");
                self.$message.error("网络出错");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加用户
    addUser() {
      this.dialogAddgsVisible = true;
      this.title = "新增员工";
    },
    //关闭模态框
    closeDialogAddgsVisible() {
      this.$refs.addForm.resetFields(); //element封装的方法,清空模态框的值
      this.title = ""; //初始化title的值
      this.addCustomer = {
        //初始化addForm中的值
        username: "",
        realname: "",
        telephone: "",
        password: "",
        id: "",
        idCard: "",
        bankCard: "",
        status: "",
      };
    },
    //修改用户
    updateUser(data) {
      //数据回显
      this.title = "修改员工信息";
      this.addCustomer.username = data.username;
      this.addCustomer.realname = data.realname;
      this.addCustomer.telephone = data.telephone;
      this.addCustomer.password = data.password;
      this.addCustomer.bankCard = data.bankCard;
      this.addCustomer.idCard = data.idCard;
      this.addCustomer.status = data.status;
      this.addCustomer.id = data.id;
      this.addCustomer.registerTime = data.registerTime;
      console.log(this.addCustomer.id);
      //启用模态框
      this.dialogAddgsVisible = true;
    },
    //提交模态框
    saveAddForm(addForm) {
      var self = this;
      this.$refs[addForm].validate((valid) => {
        //通过验证
        if (valid) {
          //将用户输入数据获取
          var obj = self.addCustomer;
          obj.type = "waiter";
          obj.enabled = true;
          if (obj.status == "") {
            obj.status = "启用";
            console.log("启用");
          }
          if (obj.registerTime == "" || obj.registerTime == null) {
            obj.registerTime = Date.now();
            console.log(obj.registerTime);
          }

          //判断是更新还是添加,如果有id就将id也传进去
          if (this.addCustomer.id != "") {
            obj.id = this.addCustomer.id;
          }
          this.$axios
            .post("/waiter/saveOrUpdate", qs.stringify(obj))
            .then((res) => {
              if (res.data.status == 200) {
                self.getUser();
                self.$message({
                  message: "更新成功",
                  type: "success",
                });
              } else {
                console.log("添加出错");
                self.$message.error("网络出错");
              }
            });
          this.dialogAddgsVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //用户详情
    userDetail(data) {
      var id = data.id;
      //   console.log(id);
      this.$router.push({ path: "/employeeDetail/index", query: { id } });
    },
    //获取时间
    orderTime() {
      for (var i = 0; i < this.tableData.length; i++) {
        var data = new Date(this.tableData[i].registerTime);
        this.tableData[i].getDate = data.toLocaleString();
      }
    },
  },
  //点击获取
};
</script>
